<template>
  <div>
    <van-row class="heads">
      <van-icon name="arrow-left" @click="back" class="back" />
      <span> 全部订单 </span>
    </van-row>
    <van-row>
      <van-tabs
        v-model="active"
        animated
        sticky
        color="#4bd863"
        @click="onClick"
      >
        <van-tab v-for="(item, i) in chioce" :key="i" :title="item.title">
          <component v-bind:is="item.componentName"></component>
        </van-tab>
      </van-tabs>
    </van-row>
    <van-row> </van-row>
  </div>
</template>

<script>
import alls from "../../../components/profile/allorders/all.vue";
import paiding from "../../../components/profile/allorders/paiding.vue";
import pending from "../../../components/profile/allorders/pending.vue";
import selfmention from "../../../components/profile/allorders/selfmention.vue";
import dispatching from "../../../components/profile/allorders/dispatching.vue";
import dispatched from "../../../components/profile/allorders/dispatched.vue";
import cancel from "../../../components/profile/allorders/cancel.vue";
import appraise from "../../../components/profile/allorders/appraise.vue";

export default {
  name: "Fruith5Allorder",

  data() {
    return {
      com: `<alls></alls>`,
      active: 0,
      chioce: [
        {
          id: 1,
          title: "全部",
          componentName: "alls",
        },
        {
          id: 2,
          title: "待卖家确认",
          componentName: "pending",
        },
        {
          id: 3,
          title: "待支付",
          componentName: "paiding",
        },
        {
          id: 4,
          title: "待发货",
          componentName: "dispatching",
        },
        {
          id: 5,
          title: "待收货",
          componentName: "dispatched",
        },
        {
          id: 6,
          title: "自提订单",
          componentName: "selfmention",
        },
        {
          id: 7,
          title: "待评价",
          componentName: "appraise",
        },
        {
          id: 8,
          title: "已取消",
          componentName: "cancel",
        },
      ],
    };
  },

  mounted() {},
  created() {
    console.log(alls);
  },
  methods: {
    back() {
      this.$router.go(-1);
    },

    onClick(name, title) {
      console.log(name,title);
    },
  },
  components: {
    alls,
    paiding,
    pending,
    selfmention,
    dispatching,
    dispatched,
    cancel,
    appraise,
  },
};
</script>

<style  scoped>
.back {
  cursor: pointer;
}
.heads {
  font-size: 1.125rem;
  font-weight: bold;
  /* line-height: 2.375rem; */
  color: white;
  background-color: #4bd863;
  height: 2.375rem;
  padding: 0.9375rem 0.1875rem 0rem 0.625rem;
}
</style>